<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>当有2条或者2条以上的信息，弹出一个弹框</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
        }

        .query-dialogBox {
            position: relative;
            width: 80%;
            height: 50%;
            border-radius: 2rem;
            margin: 50% auto;
            background: #fff;
            font-size: 1.2rem;
            color: #ccc;
            font-weight: bold;
        }

        #line-query {
            width: 80%;
            padding: 5%;
            border-bottom: 1px solid #ccc;
            display: flex;
            /*justify-content: center;*/
            align-items: center;
            margin: 5% 3%;
        }

        #line-query .farmer-id {
            margin-right: 40%;
        }

        #cancel-btn {
            width: 40%;
            height: 15%;
            border-radius: 2rem;
            position: absolute;
            left: 30%;
            bottom: 5%;
            color: #fff;
            font-size: 1.5rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #3fd5a5;
        }

        .touch-down {
            opacity: .4;
        }
    </style>
</head>

<body>
    <section class="query-dialogBox">

    </section>
    <script type="text/html" id="query-box">
        <%for(var i = 0; i<farmers.length; i++){%>
            <p id="line-query" onclick="online(<%=farmers[i].id%>)" tapmode="touch-down"><span class="farmer-id"><%=i+1%></span>
                <%=farmers[i].name%>
            </p>
            <%}%>
                <section id="cancel-btn" tapmode="touch-down">
                    取消
                </section>
    </script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/window.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript" src="../script/baiduTemplate.js"></script>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    function online(id) {
        var id = id;
        farmer(id);
    }

    function initFront() {
        var response = api.pageParam.response;
        var bt = baidu.template;
        var a = bt("query-box", response);
        document.querySelector(".query-dialogBox").innerHTML = a;

    }

    function initEvent() {
        var cancelbtn = $api.byId('cancel-btn')
        $api.addEvt(cancelbtn, 'touchend', function() {
            api.closeFrame({
                name: 'dialog_frame'
            });
        });
    }

    apiready = function() {
        initFront();
        initEvent();
    }
</script>

</html>
